<template>
	<view class="mainpage">
		<!-- <image src="../../static/img/mine/banner_text.jpg"></image> -->
		<view class="banner-top-text"><image src="../../static/img/mine/banner_text.png"></image></view>
		<view class="page-all">
			<!-- <view class="banner-top-text"></view> -->
			
			<view class="page-up">
				<view class="page-integer"><text>{{integer || 0}}</text></view>
				<view class="my-integer"><text>我的积分</text></view>
			</view>
		</view>
		<view class="page-center">
			<view class="page-first">
				<step :options="options" :active="2"></step>
			</view>
			<view class="run-sign">
				<view :class=" isSign ?'run-sign-out run-sign-go':'run-sign-go' " @click="getList()">
					<text>{{immediately}}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-up">
				<view class="footer-up-left"></view>
				<view class="footer-up-right"><text>做任务赚积分</text></view>
			</view>
			<view class="footer-down">
				<view class="footer-down-left">
					<view class="footer-down-left-up"><text>购物有礼</text></view>
					<view class="footer-down-left-down"><text>购买商品，可获得积分</text></view>
				</view>
				<view class="footer-down-right" @click="getShopping()">
					<text>去购买</text>
				</view>
			</view>
		</view>
		<open v-model="dialogShow" @click="setFalse()"></open>
	</view>
</template>
<script>
	import step from "@/components/time-shaft/uni-steps.vue"
	import open from "@/components/open-windows/h-form-alert.vue"
	export default {
		components: {
			step,
			open
		},
		data() {
			return {
				dialogShow: false,
				isSign: false,
				immediately: "",
				integer: "",
				options: []
			}
		},
		onLoad: function(options) {

			this.integer = this.pub.getUserInfo().integral

			// this.options = [{
			// 		title: '12月26日',
			// 		isflag: true,
			// 	},
			// 	{
			// 		title: '昨天',

			// 	},
			// 	{
			// 		title: '今天',
			// 		isflag:true
			// 	},
			// 	{
			// 		title: '明天',

			// 	},
			// 	{
			// 		title: '12月30日',

			// 	},
			// ]

			this.getTimeList()



		},

		onShow: function() {
			//#ifdef H5
			document.title = '签到'
			//#endif
		},
		methods: {
			getIntegral: function(memberId) {
				let params = {
					channelType: '5',
					memberId: memberId
				}
				this.$postApi(this.$path.GET_INTERGRAL_BY_ID, params).then(res => {
					console.log("登录用户积分数据返回-------->", res.data)
					if (res.data.success) {
						let userinfo = this.pub.getUserInfo()
						userinfo.integral = res.data.data.integral
						this.pub.setUserInfo(userinfo)
						this.integer = this.pub.getUserInfo().integral
					}
				})
			},
			getList: function() {
				if (this.isSign) {
					this.pub.showError('签过啦，明天再来吧')
					return
				}
				var params = {
					memberId: this.pub.getUserInfo().memberId,
					// memberId: this.pub.getUserInfo().memberId || "6f6ef90f42dc4ce0b22de319e7adc808",
				}
				this.$postApi(this.$path.INTEGRAL_SIGN, params).then(res => {
					console.log("签到返回数据--------------->", res.data)
					if (res.data.success) {
						this.dialogShow = true;
						this.getTimeList()
						this.getIntegral(this.pub.getUserInfo().memberId)
						
					} else {
						this.pub.showError(res.data.error.errorMessage)
					}
				})
			},
			getTimeList: function() {
				this.options = []
				var params = {
					memberId: this.pub.getUserInfo().memberId,
					// memberId: this.pub.getUserInfo().memberId || "6f6ef90f42dc4ce0b22de319e7adc808"
				}
				this.$postApi(this.$path.INTEGRAL_THREE_SIGN, params).then(res => {
					console.log("签到信息返回数据-------------->", res.data);

					if (res.data.success) {

						let list = res.data.data;
						let nowDate = new Date().getDate() - 2
						list.forEach((item, index) => {
							let now = new Date().getMonth() + 1 + '月' + (nowDate + index) + '日'
							this.options.push({
								title: now,
								isflag: item.isSign
							})
						})
						this.options.push({
							title: new Date().getMonth() + 1 + '月' + (nowDate + 3) + '日',
							isflag: false
						})
						this.options.push({
							title: new Date().getMonth() + 1 + '月' + (nowDate + 4) + '日',
							isflag: false
						})
						console.log("this.options------------>", this.options)
						this.isSign = list[2].isSign;
						this.immediately = this.isSign ? '今日已签到' : '立即签到'
					} else {

					}
				})
			},
			getShopping: function() {
				// console.log("this.dialogShow--->", this.dialogShow)
				// this.dialogShow = true;
				uni.navigateTo({
					url: '/pages/home_new/home_new',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
		


		}
	}
</script>

<style lang="scss">
	.mainpage {
		font-size: 34upx;
		padding: 0;
		margin: 0;
		min-height: 100%;
		background: url(../../static/img/mine/Sign-in-points.jpg) no-repeat;
		background-size: 100% 100%;
		padding: 0 24upx;
		overflow: hidden;
	}
	.banner-top-text{
		width: 503upx;
		height: 83upx;
		margin:29upx 99upx 0upx 99upx;
	}
	.banner-top-text image{
		width: 100%;
		height: 100%;
	}
	.page-all {
		display: flex;
		justify-content: center;

		.page-up {
			width: 306upx;
			height: 346upx;
			margin-top: 29upx;
			background: url(../../static/img/mine/myinteger.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
		}

		.page-integer {
			width: 100%;
			position: absolute;
			display: flex;
			justify-content: center;
			margin-top: 50upx;
			font-size: 54upx;
			font-family: HYCuHeiJ;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
		.my-integer{
			width: 100%;
			position: absolute;
			display: flex;
			justify-content: center;
			margin-top: 127upx;
			font-size:30upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,255,255,1);
		}
	}

	.page-center {
		margin-top: -50upx;
		height: 449upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;

		.page-first {
			padding-top: 119upx;
		}

		.run-sign {
			display: flex;
			justify-content: center;
			margin-top: 65upx;
		}

		.run-sign-go {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 485upx;
			height: 90upx;
			background: linear-gradient(0deg, rgba(252, 97, 24, 1) 0%, rgba(255, 120, 37, 1) 100%);
			border-radius: 45upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
		}

		.run-sign-out {
			background: rgba(194, 194, 194, 1);
		}
	}

	.footer {
		display: flex;
		flex-direction: column;
		margin-top: 58upx;

		.footer-up {
			display: flex;
			align-items: center;

			.footer-up-left {

				width: 6upx;
				height: 40upx;
				background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
				border-radius: 3upx
			}

			.footer-up-right {
				margin-left: 10upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);

			}


		}

		.footer-down {
			width: 100%;
			height: 145upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20upx;
			margin-top: 32upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 27upx;

			.footer-down-left {
				.footer-down-left-up text {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				.footer-down-left-down {
					margin-top: 19upx;
					font-size: 22upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
				}
			}

			.footer-down-right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255, 94, 4, 1);
				border-radius: 25px;
				width: 118upx;
				height: 49upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}

	}
</style>
